<template>
  <el-container>
    <el-header>
      <!--表单-->
      <el-row :gutter="20">
        <el-col :span="6"><el-input v-model="form.account" placeholder="请输入账号"></el-input></el-col>
        <el-col :span="6"><el-input v-model="form.username" placeholder="请输入用户名"></el-input></el-col>
        <el-col :span="6">
          <el-select v-model="form.state" placeholder="请选择">
          <el-option
            v-for="(item,k) in state_list"
            :key="k"
            :label="item"
            :value="k">
          </el-option>
        </el-select>
        </el-col>
        <el-col :span="6"><el-button type="primary" @click="getStaffList">搜索</el-button></el-col>
      </el-row>
    </el-header>
    <el-main>
      <!--表格-->
      <el-table
        ref="multipleTable"
        :data="account_list.list"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="batchHandle">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="ID"
          width="120">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column
          prop="account"
          label="账号"
          width="120">
        </el-table-column>

        <el-table-column
          prop="username"
          label="用户名"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="dept"
          label="部门"
          width="500px"
        >
          <template slot-scope="scope">
            <span v-html="scope.row.dept"></span>
          </template>

        </el-table-column>

        <el-table-column
          prop="position"
          label="职位"
          width="500px"

        >
          <template slot-scope="scope">
            <span v-html="scope.row.position"></span>
          </template>
        </el-table-column>

        <el-table-column
          prop="status"
          label="状态"
          show-overflow-tooltip>
        </el-table-column>

        <!--操作-->
        <el-table-column label="操作">
          <template slot-scope="scope">

            <div class="frow fcenter" style="align-items: flex-end;">
              <div> <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button></div>
              <div style="margin-left: 10px;"><el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button></div>
            </div>

          </template>
        </el-table-column>
      </el-table>


      <div style="margin-top: 20px" class="frow">
       <div class="btn"><el-button type="primary" @click="batchDel">批量删除</el-button></div>
      </div>

    </el-main>
  </el-container>
</template>

<script>
import {mapState,mapActions} from 'vuex'
import {batchDelStaff} from "@/apilist/Staff"
  export default {
    data() {
      return {
        form: {
          account: '',
          username: '',
          state: 1,
          page: 1,
          pageSize: 10
        },
      }
    },

    computed:{
      ...mapState("SetUser",["account_list","state_list"]),
    },
    methods:{
      ...mapActions("SetUser",["getAccountListActions","getStaffInfoActions"]),
      //批量操作
      batchHandle(row){
       row.forEach((r)=>{
         this.selectRaw.push(r.id);
       })
      },
      //批量删除
      batchDel(){
        let _this = this;
        let id_list = [...new Set(_this.selectRaw)];//vue去重
        let params = {
          'id_list':id_list
        };
          batchDelStaff(params).then((res)=>{
            if(res.data.state == 'ok'){
              this.$message({
                message: res.data.msg,
                type: 'success',
                onClose:()=>{
                  _this.tableData.some((item, i)=>{
                    id_list.forEach((id)=>{
                      if(item.id == id){
                        _this.tableData.splice(i, 1);
                      }
                    });
                  })
                },
              });
            }else{
              this.$message.error(res.data.msg);
            }
        });
      },
      //编辑
      handleEdit(k,v){
        this.getStaffInfoActions({id: v.id});
        this.$emit('addTab','员工编辑','staff_edit');
      },
      //删除
      handleDelete(k,v){

      },
      //调整分页
      handleSizeChange(val){this.form.pageSize = val;this.getStaffList();},

      //点击当前页面
      handleCurrentChange(val){this.form.page = val;this.getStaffList();},

      //获取员工列表
      getStaffList(){
        this.getAccountListActions(this.form)
      },


    },
    mounted() {

    }
  }
</script>
